import * as echarts from 'echarts'
import { onMounted, watch, computed, watchEffect } from 'vue'

const formatData = (data: any) => {
  const xAxis: any = []
  const result: any = []
  data.forEach((item: any) => {
    xAxis.push(item.key)
    result.push(item.count)
  })
  return {
    xAxis,
    result,
  }
}
const Comp = (props: any) => {
  const { id, data, color, key, yname } = props
  watchEffect(
    () => {
      const _data = data[key]
      const myChart = echarts.init(document.getElementById(id) as any)
      if (_data) {
        const length = _data[0]?.yaxisList[0]?.data[0]?.toString?.()?.length
        const left = length * 4 + 35
        const option = {
          grid: {
            left: left,
            top: 30,
            right: 20,
            bottom: 30,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#ffffff',
              fontSize: 10,
            },
            data: _data[0].xaxisList,
          },
          yAxis: {
            name: yname,
            type: 'value',
            splitNumber: 3,
            axisLabel: {
              color: '#ffffff',
              formatter: function (value, index) {
                return value / 10000
              },
              fontSize: 10,
            },
            // axisLabel: {
            //   color: '#ffffff',
            // },
            splitLine: {
              lineStyle: {
                color: '#215570',
                type: [5, 10],
                dashOffset: 5,
              },
            },
          },
          series: [
            {
              data: _data[0].yaxisList[0].data,
              type: 'bar',
              // label: {
              //   show: true,
              //   position: 'top',
              //   color: '#ffffff',
              // },
              barMaxWidth: 30,
              itemStyle: {
                color: color,
              },
            },
          ],
        }
        myChart.setOption(option)
      }

      window.addEventListener('resize', () => {
        myChart?.resize()
      })
    },
    {
      flush: 'post',
    },
  )
}

export default Comp
